<template>
  <div :id="id" :style="{ width: width, height: height }"></div>
</template>

<script>
export default {
  name: "Echarts",
  props: {
    id: {
      type: String,
      default: "myChart",
    },
    width: {
      type: String,
      default: "100%",
    },

    height: {
      type: String,
      default: "400px",
    },
    seriesData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  watch: {
    seriesData: {
      deep: true,
      handler(val) {
        this.drawLine(val);
      },
    },
  },
  data() {
    return {};
  },

  mounted() {
    this.$nextTick(function () {
      this.drawLine();
    });
  },

  methods: {
    drawLine(data) {
      if (!data) return;
      let myChart = this.echarts.init(document.getElementById(this.$props.id));
      let options = {
        title: {
          text: "评估任务统计",
        },
        xAxis: {
          type: "category",
          data: data ? data[1] : data[1],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "bar",
            data: data ? data[0] : data[0],
            barWidth: "40px",
            // #5470c6
            color: "#91cc75", //更换颜色
            // 显示数值
            // label: {
            //   show: true,
            //   position: "top",
            //   formatter: function(data) {
            //     return data.value ;
            //   }
            // }
          },
        ],
      };
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      myChart.setOption(options);
    },
  },
};
</script>
